<!DOCTYPE html>
<html lang="<?php echo $lang; ?>">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo $t['siteTitle']; ?></title>
    <meta name="description" content="<?php echo $t['metaDescription']; ?>">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net.net/npm.org/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#9E2A2B',    // 中国红
                        secondary: '#D8A47F',  // 暖棕色
                        accent: '#E9B872',     // 金色
                        dark: '#2C3539',       // 墨黑
                        light: '#F8F4E3',      // 米白
                        jade: '#2A9D8F'        // 玉色
                    },
                    fontFamily: {
                        chinese: ['"Ma Shan Zheng"', '"Noto Serif SC"', 'serif']
                    },
                    boxShadow: {
                        'chinese': '0 4px 12px rgba(158, 42, 43, 0.15)',
                        'scroll': '0 0 15px rgba(44, 53, 57, 0.2)'
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .text-shadow {
                text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
            }
            .bg-pattern {
                background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%239e2a2b' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
            }
            .bg-paper {
                background-color: #F8F4E3;
                background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23d8a47f' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
            }
            .scroll-decoration {
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%239E2A2B' fill-opacity='0.1' d='M0,128L48,144C96,160,192,192,288,197.3C384,203,480,181,576,181.3C672,181,768,203,864,197.3C960,192,1056,160,1152,133.3C1248,107,1344,85,1392,74.7L1440,64L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
                background-position: bottom;
                background-repeat: no-repeat;
                background-size: 100% 60px;
            }
            .chinese-border {
                border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='75' height='100'%3E%3Cg fill='none' stroke='%239E2A2B' stroke-width='2'%3E%3Cpath d='M1 1h73v98H1z'/%3E%3Cpath d='M8 1v98M16 1v98M24 1v98M32 1v98M40 1v98M48 1v98M56 1v98M64 1v98M72 1v98' stroke-dasharray='2 4'/%3E%3C/g%3E%3C/svg%3E") 25;
                border-width: 15px;
                border-style: solid;
            }
            .character-card {
                transition: transform 0.4s ease, box-shadow 0.4s ease;
            }
            .character-card:hover {
                transform: translateY(-8px);
                box-shadow: 0 12px 20px rgba(158, 42, 43, 0.2);
            }
            .ink-splash {
                position: relative;
            }
            .ink-splash::after {
                content: '';
                position: absolute;
                top: -10%;
                right: -10%;
                width: 40%;
                height: 40%;
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%239E2A2B' fill-opacity='0.1' d='M96,58c-1.2,0-2.3-0.1-3.5-0.3c-2.3-0.4-4.5-1.1-6.6-2.1c-2.1-1-4-2.4-5.7-4.1c-1.7-1.7-3.1-3.6-4.1-5.7c-1-2.1-1.7-4.3-2.1-6.6C72.1,30.3,72,29.2,72,28c0-1.2,0.1-2.3,0.3-3.5c0.4-2.3,1.1-4.5,2.1-6.6c1-2.1,2.4-4,4.1-5.7c1.7-1.7,3.6-3.1,5.7-4.1c2.1-1,4.3-1.7,6.6-2.1C93.7,8.1,94.8,8,96,8c1.2,0,2.3,0.1,3.5,0.3c2.3,0.4,4.5,1.1,6.6,2.1c2.1,1,4,2.4,5.7,4.1c1.7,1.7,3.1,3.6,4.1,5.7c1,2.1,1.7,4.3,2.1,6.6c0.2,1.2,0.3,2.3,0.3,3.5c0,1.2-0.1,2.3-0.3,3.5c-0.4,2.3-1.1,4.5-2.1,6.6c-1,2.1-2.4,4-4.1,5.7c-1.7,1.7-3.6,3.1-5.7,4.1c-2.1,1-4.3,1.7-6.6,2.1C98.3,57.9,97.2,58,96,58z'/%3E%3C/svg%3E");
                background-repeat: no-repeat;
                z-index: 0;
            }
            .scroll-reveal {
                opacity: 0;
                transform: translateY(30px);
                transition: opacity 0.8s ease, transform 0.8s ease;
            }
            .scroll-reveal.active {
                opacity: 1;
                transform: translateY(0);
            }
        }
    </style>
    <link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Serif+SC:wght@400;700&display=swap" rel="stylesheet">
</head>
<body class="bg-paper text-dark font-chinese">
    <!-- 导航栏 -->
    <header class="sticky top-0 z-50 bg-light/90 backdrop-blur-sm border-b border-secondary/30 shadow-sm">
        <div class="container mx-auto px-4 py-3 flex flex-wrap items-center justify-between">
            <!-- 游戏Logo -->
            <a href="#" class="flex items-center gap-2 text-2xl font-bold text-primary">
                <i class="fa fa-pagelines text-jade text-3xl"></i>
                <span><?php echo $t['siteTitle']; ?></span>
            </a>
            
            <!-- 移动端菜单按钮 -->
            <button id="menu-toggle" class="md:hidden text-dark text-2xl">
                <i class="fa fa-bars"></i>
            </button>
            
            <!-- 导航菜单 -->
            <nav id="main-nav" class="hidden w-full md:flex md:w-auto mt-4 md:mt-0">
                <ul class="flex flex-col md:flex-row gap-2 md:gap-6">
                    <?php foreach($t['nav'] as $item) : ?>
                        <li>
                            <a href="<?php echo $item['link']; ?>" class="block py-2 px-3 rounded 
                                <?php echo isset($item['isCta']) ? 'bg-primary text-light font-bold shadow-chinese' : 'text-dark hover:bg-primary/10'; ?>">
                                <?php echo $item['name']; ?>
                            </a>
                        </li>
                    <?php endforeach; ?>
                    
                    <!-- 语言切换 -->
                    <li class="relative group">
                        <a href="#" class="block py-2 px-3 rounded hover:bg-primary/10 flex items-center gap-1">
                            <i class="fa fa-language"></i>
                            <span><?php echo $t['lang'][$lang]; ?></span>
                            <i class="fa fa-chevron-down text-xs"></i>
                        </a>
                        <ul class="absolute right-0 mt-2 w-36 bg-light border border-secondary/30 rounded-lg shadow-scroll py-2 hidden group-hover:block z-50">
                            <?php foreach($t['lang'] as $code => $name) : ?>
                                <li>
                                    <a href="?lang=<?php echo $code; ?>" class="block px-4 py-2 hover:bg-primary/10 <?php echo $lang == $code ? 'bg-primary/10 font-bold' : ''; ?>">
                                        <?php echo $name; ?>
                                    </a>
                                </li>
                            <?php endforeach; ?>
                        </ul>
                    </li>
                </ul>
            </nav>
        </div>
    </header>

    <main>
        <!-- 英雄区域 -->
        <section id="hero" class="relative overflow-hidden py-16 md:py-24 ink-splash">
            <div class="absolute inset-0 z-0">
                <img src="https://picsum.photos/id/131/1920/1080" alt="中国风背景" class="w-full h-full object-cover opacity-20">
            </div>
            <div class="container mx-auto px-4 relative z-10">
                <div class="flex flex-col md:flex-row items-center gap-8 md:gap-16">
                    <div class="w-full md:w-1/2 text-center md:text-left">
                        <h1 class="text-[clamp(2.5rem,5vw,4rem)] font-bold leading-tight text-shadow mb-6 text-primary">
                            <?php echo $t['hero']['title']; ?>
                        </h1>
                        <p class="text-lg md:text-xl mb-8 text-dark/80 max-w-lg mx-auto md:mx-0 leading-relaxed">
                            <?php echo $t['hero']['subtitle']; ?>
                        </p>
                        <div class="flex flex-col sm:flex-row gap-4 justify-center md:justify-start">
                            <a href="<?php echo $t['hero']['cta1']['link']; ?>" class="bg-primary hover:bg-red-800 text-light font-bold py-3 px-8 rounded shadow-chinese text-lg flex items-center justify-center gap-2 transition-colors">
                                <?php echo $t['hero']['cta1']['text']; ?>
                                <i class="fa fa-rocket"></i>
                            </a>
                            <a href="<?php echo $t['hero']['cta2']['link']; ?>" class="bg-light hover:bg-white text-primary border border-primary/30 font-bold py-3 px-8 rounded shadow-chinese text-lg flex items-center justify-center gap-2 transition-colors">
                                <i class="fa <?php echo $t['hero']['cta2']['icon']; ?>"></i>
                                <?php echo $t['hero']['cta2']['text']; ?>
                            </a>
                        </div>
                        <p class="mt-6 text-sm text-dark/70 font-bold border border-secondary/30 inline-block px-4 py-2 rounded-full">
                            <i class="fa fa-calendar text-primary mr-2"></i> <?php echo $t['hero']['version']; ?>
                        </p>
                    </div>
                    <div class="w-full md:w-1/2 relative">
                        <div class="relative chinese-border rounded overflow-hidden shadow-xl transform transition-all duration-500 hover:shadow-chinese">
                            <img src="https://picsum.photos/id/237/600/500" alt="游戏宣传图" class="w-full h-auto">
                            <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-dark/70 to-transparent p-6">
                                <span class="text-light text-shadow font-bold">卷轴 <?php echo $t['hero']['version']; ?></span>
                            </div>
                        </div>
                        <!-- 装饰元素 -->
                        <div class="absolute -top-6 -right-6 w-20 h-20 bg-jade/20 rounded-full"></div>
                        <div class="absolute -bottom-8 -left-8 w-16 h-16 bg-primary/20 rounded-full"></div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 游戏特色 -->
        <section id="features" class="py-16 bg-light scroll-decoration">
            <div class="container mx-auto px-4">
                <div class="text-center mb-16 scroll-reveal">
                    <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold mb-4 text-primary">
                        <?php echo $t['features']['title']; ?>
                    </h2>
                    <p class="text-dark/70 max-w-2xl mx-auto text-lg">
                        <?php echo $t['features']['subtitle']; ?>
                    </p>
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
                    <?php $delay = 0; foreach($t['features']['items'] as $feature) : $delay += 100; ?>
                        <div class="scroll-reveal" style="transition-delay: <?php echo $delay; ?>ms">
                            <div class="bg-paper rounded-lg p-6 shadow-chinese hover:shadow-scroll transition-all duration-300 border border-secondary/10 h-full">
                                <div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mb-5">
                                    <i class="fa <?php echo $feature['icon']; ?> text-2xl text-primary"></i>
                                </div>
                                <h3 class="text-xl font-bold mb-3 text-dark"><?php echo $feature['title']; ?></h3>
                                <p class="text-dark/70 leading-relaxed"><?php echo $feature['desc']; ?></p>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>
            </div>
        </section>

        <!-- 角色介绍 -->
        <section id="characters" class="py-16 bg-pattern">
            <div class="container mx-auto px-4">
                <div class="text-center mb-16 scroll-reveal">
                    <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold mb-4 text-primary">
                        <?php echo $t['characters']['title']; ?>
                    </h2>
                    <p class="text-dark/70 max-w-2xl mx-auto text-lg">
                        <?php echo $t['characters']['subtitle']; ?>
                    </p>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                    <?php $delay = 0; foreach($t['characters']['items'] as $character) : $delay += 150; ?>
                        <div class="scroll-reveal" style="transition-delay: <?php echo $delay; ?>ms">
                            <div class="character-card bg-light rounded-lg overflow-hidden shadow-chinese border border-secondary/20">
                                <div class="relative h-64 overflow-hidden">
                                    <img src="<?php echo $character['image']; ?>" alt="<?php echo $character['alt']; ?>" class="w-full h-full object-cover transition-transform duration-700 hover:scale-110">
                                    <div class="absolute inset-0 bg-gradient-to-t from-dark/60 to-transparent"></div>
                                    <div class="absolute top-3 right-3 bg-primary/80 text-light text-sm font-bold px-3 py-1 rounded-full">
                                        <?php echo $character['class']; ?>
                                    </div>
                                </div>
                                <div class="p-5">
                                    <h3 class="text-xl font-bold mb-2 text-primary border-b border-secondary/20 pb-2"><?php echo $character['name']; ?></h3>
                                    <p class="text-dark/70 text-sm leading-relaxed mt-3"><?php echo $character['desc']; ?></p>
                                </div>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>

                <div class="text-center mt-12 scroll-reveal">
                    <a href="#" class="inline-flex items-center gap-2 text-primary font-bold hover:text-red-800 transition-colors border-b border-primary/30 pb-1">
                        <?php echo $t['characters']['moreLink']; ?>
                        <i class="fa fa-arrow-right"></i>
                    </a>
                </div>
            </div>
        </section>

        <!-- 游戏截图 -->
        <section id="screenshots" class="py-16 bg-light scroll-decoration">
            <div class="container mx-auto px-4">
                <div class="text-center mb-16 scroll-reveal">
                    <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold mb-4 text-primary">
                        <?php echo $t['screenshots']['title']; ?>
                    </h2>
                    <p class="text-dark/70 max-w-2xl mx-auto text-lg">
                        <?php echo $t['screenshots']['subtitle']; ?>
                    </p>
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                    <?php $delay = 0; foreach($t['screenshots']['items'] as $screenshot) : $delay += 100; ?>
                        <div class="scroll-reveal" style="transition-delay: <?php echo $delay; ?>ms">
                            <div class="group relative rounded overflow-hidden shadow-chinese border border-secondary/20 hover:border-primary/30 transition-all duration-500">
                                <img src="<?php echo $screenshot['image']; ?>" alt="<?php echo $screenshot['alt']; ?>" class="w-full h-48 object-cover transition-transform duration-700 group-hover:scale-110">
                                <div class="absolute inset-0 bg-gradient-to-t from-dark/70 via-dark/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end">
                                    <p class="p-3 text-sm text-light"><?php echo $screenshot['alt']; ?></p>
                                </div>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>

                <div class="text-center mt-12 scroll-reveal">
                    <a href="#" class="inline-flex items-center gap-2 text-primary font-bold hover:text-red-800 transition-colors border-b border-primary/30 pb-1">
                        <?php echo $t['screenshots']['moreLink']; ?>
                        <i class="fa fa-picture-o"></i>
                    </a>
                </div>
            </div>
        </section>

        <!-- 游戏预告片 -->
        <section id="trailer" class="py-16 bg-pattern">
            <div class="container mx-auto px-4">
                <div class="text-center mb-12 scroll-reveal">
                    <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold mb-4 text-primary">
                        <?php echo $t['trailer']['title']; ?>
                    </h2>
                    <p class="text-dark/70 max-w-2xl mx-auto text-lg">
                        <?php echo $t['trailer']['subtitle']; ?>
                    </p>
                </div>

                <div class="max-w-4xl mx-auto relative chinese-border rounded overflow-hidden shadow-xl group scroll-reveal">
                    <img src="<?php echo $t['trailer']['image']; ?>" alt="<?php echo $t['trailer']['alt']; ?>" class="w-full h-auto">
                    <div class="absolute inset-0 bg-dark/40 flex items-center justify-center opacity-100 group-hover:opacity-100 transition-opacity">
                        <button class="w-20 h-20 md:w-24 md:h-24 bg-primary rounded-full flex items-center justify-center shadow-lg transform group-hover:scale-110 transition-transform border-4 border-light/30">
                            <i class="fa fa-play text-light text-3xl md:text-4xl ml-1"></i>
                        </button>
                    </div>
                    <div class="absolute bottom-4 right-4 bg-dark/70 text-light text-sm px-3 py-1 rounded-full flex items-center gap-2 border border-secondary/30">
                        <i class="fa fa-clock-o text-accent"></i>
                        <span><?php echo $t['trailer']['duration']; ?></span>
                    </div>
                    <div class="absolute top-4 left-4 bg-primary/80 text-light text-sm px-3 py-1 rounded-full border border-accent/30">
                        <?php echo $t['trailer']['released']; ?>
                    </div>
                </div>
            </div>
        </section>

        <!-- 社区论坛 -->
        <section id="forum" class="py-16 bg-light scroll-decoration">
            <div class="container mx-auto px-4">
                <div class="text-center mb-12 scroll-reveal">
                    <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold mb-4 text-primary">
                        <?php echo $t['forum']['title']; ?>
                    </h2>
                    <p class="text-dark/70 max-w-2xl mx-auto text-lg">
                        <?php echo $t['forum']['subtitle']; ?>
                    </p>
                </div>

                <div class="max-w-3xl mx-auto">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <?php $delay = 0; foreach($t['forum']['topics'] as $topic) : $delay += 150; ?>
                            <div class="scroll-reveal" style="transition-delay: <?php echo $delay; ?>ms">
                                <div class="bg-paper border border-secondary/20 rounded-lg p-6 shadow-chinese hover:shadow-scroll transition-all duration-500 hover:border-primary/30">
                                    <h3 class="text-xl font-bold mb-2 text-primary"><?php echo $topic['name']; ?></h3>
                                    <div class="flex justify-between items-center text-sm text-dark/60 mt-4">
                                        <span class="flex items-center gap-1">
                                            <i class="fa fa-comment-o text-primary"></i> 
                                            <?php echo $topic['count']; ?> 
                                            <?php echo $lang == 'zh' ? '个主题' : ($lang == 'ja' ? '件のトピック' : ($lang == 'ko' ? '개의 토픽' : 'topics')); ?>
                                        </span>
                                        <span class="flex items-center gap-1">
                                            <i class="fa fa-clock-o text-primary"></i> 
                                            <?php echo $topic['lastPost']; ?>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    </div>

                    <div class="text-center mt-10 scroll-reveal">
                        <a href="#" class="inline-block bg-jade hover:bg-teal-700 text-light font-bold py-3 px-8 rounded shadow-chinese transition-colors">
                            <?php echo $t['forum']['cta']; ?>
                            <i class="fa fa-comments ml-2"></i>
                        </a>
                    </div>
                </div>
            </div>
        </section>

        <!-- 最新动态 -->
        <section id="news" class="py-16 bg-pattern">
            <div class="container mx-auto px-4">
                <div class="text-center mb-16 scroll-reveal">
                    <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold mb-4 text-primary">
                        <?php echo $t['news']['title']; ?>
                    </h2>
                    <p class="text-dark/70 max-w-2xl mx-auto text-lg">
                        <?php echo $t['news']['subtitle']; ?>
                    </p>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                    <?php $delay = 0; foreach($t['news']['items'] as $news) : $delay += 200; ?>
                        <div class="scroll-reveal" style="transition-delay: <?php echo $delay; ?>ms">
                            <article class="bg-light border border-secondary/20 rounded-lg overflow-hidden shadow-chinese hover:shadow-scroll hover:border-primary/30 transition-all duration-500 h-full flex flex-col">
                                <div class="h-48 overflow-hidden">
                                    <img src="<?php echo $news['image']; ?>" alt="" class="w-full h-full object-cover hover:scale-110 transition-transform duration-700">
                                </div>
                                <div class="p-6 flex flex-col flex-grow">
                                    <div class="flex justify-between items-center mb-3 text-sm">
                                        <span class="bg-jade/20 text-jade px-3 py-1 rounded-full border border-jade/30">
                                            <?php echo $news['category']; ?>
                                        </span>
                                        <span class="text-dark/60"><i class="fa fa-calendar-o mr-1 text-primary"></i> <?php echo $news['date']; ?></span>
                                    </div>
                                    <h3 class="text-xl font-bold mb-3 text-dark"><?php echo $news['title']; ?></h3>
                                    <p class="text-dark/70 text-sm mb-4 flex-grow leading-relaxed">
                                        <?php echo $news['desc']; ?>
                                    </p>
                                    <a href="#" class="inline-flex items-center text-primary font-bold hover:text-red-800 transition-colors mt-auto">
                                        <?php echo $t['readMore']; ?>
                                        <i class="fa fa-arrow-right ml-1"></i>
                                    </a>
                                </div>
                            </article>
                        </div>
                    <?php endforeach; ?>
                </div>

                <div class="text-center mt-12 scroll-reveal">
                    <a href="#" class="inline-flex items-center gap-2 text-primary font-bold hover:text-red-800 transition-colors border-b border-primary/30 pb-1">
                        <?php echo $t['news']['moreLink']; ?>
                        <i class="fa fa-newspaper-o"></i>
                    </a>
                </div>
            </div>
        </section>

        <!-- 预注册 -->
        <section id="pre-register" class="py-16 bg-light relative overflow-hidden">
            <!-- 装饰元素 -->
            <div class="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none">
                <div class="absolute -top-10 -left-10 w-40 h-40 bg-jade/10 rounded-full"></div>
                <div class="absolute top-1/3 -right-20 w-60 h-60 bg-primary/10 rounded-full"></div>
                <div class="absolute -bottom-20 left-1/4 w-52 h-52 bg-secondary/10 rounded-full"></div>
            </div>

            <div class="container mx-auto px-4 relative z-10">
                <div class="max-w-6xl mx-auto bg-paper rounded-lg shadow-xl overflow-hidden border border-secondary/20 scroll-reveal">
                    <div class="flex flex-col md:flex-row">
                        <div class="w-full md:w-1/2 p-8 md:p-12 flex flex-col justify-center">
                            <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold mb-4 text-primary">
                                <?php echo $t['preRegister']['title']; ?>
                            </h2>
                            <p class="text-dark/70 mb-8 leading-relaxed">
                                <?php echo $t['preRegister']['subtitle']; ?>
                            </p>

                            <form class="space-y-4">
                                <div>
                                    <label for="name" class="block text-sm font-bold text-dark/80 mb-1">
                                        <?php echo $t['preRegister']['form']['name']; ?>
                                    </label>
                                    <input type="text" id="name" placeholder="<?php echo $t['preRegister']['form']['placeholderName']; ?>" 
                                        class="w-full px-4 py-3 rounded-lg bg-light border border-secondary/30 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition text-dark">
                                </div>
                                <div>
                                    <label for="phone" class="block text-sm font-bold text-dark/80 mb-1">
                                        <?php echo $t['preRegister']['form']['phone']; ?>
                                    </label>
                                    <input type="tel" id="phone" placeholder="<?php echo $t['preRegister']['form']['placeholderPhone']; ?>" 
                                        class="w-full px-4 py-3 rounded-lg bg-light border border-secondary/30 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition text-dark">
                                </div>
                                <div>
                                    <label for="email" class="block text-sm font-bold text-dark/80 mb-1">
                                        <?php echo $t['preRegister']['form']['email']; ?>
                                    </label>
                                    <input type="email" id="email" placeholder="<?php echo $t['preRegister']['form']['placeholderEmail']; ?>" 
                                        class="w-full px-4 py-3 rounded-lg bg-light border border-secondary/30 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition text-dark">
                                </div>
                                <div class="flex items-start">
                                    <input type="checkbox" id="agreement" class="mt-1 accent-primary">
                                    <label for="agreement" class="ml-2 text-sm text-dark/70">
                                        <?php echo $t['preRegister']['form']['agreement']; ?>
                                    </label>
                                </div>
                                <button type="submit" class="w-full bg-primary hover:bg-red-800 text-light font-bold py-3 px-6 rounded-lg shadow-chinese text-lg transition-colors">
                                    <?php echo $t['preRegister']['form']['submit']; ?>
                                    <i class="fa fa-paper-plane ml-2"></i>
                                </button>
                            </form>

                            <div class="mt-6 bg-accent/10 border border-accent/30 rounded-lg p-4 flex items-start">
                                <i class="fa fa-gift text-accent text-xl mt-1 mr-3"></i>
                                <p class="text-sm text-dark/80 font-bold">
                                    <?php echo $t['preRegister']['gift']; ?>
                                </p>
                            </div>
                        </div>

                        <div class="w-full md:w-1/2 bg-gradient-to-br from-jade/10 to-primary/10 p-8 md:p-12 text-dark flex flex-col justify-center border-t md:border-t-0 md:border-l border-secondary/20">
                            <h3 class="text-2xl font-bold mb-8 text-center text-primary">
                                <i class="fa fa-bar-chart mr-2"></i> <?php echo $lang == 'zh' ? '游戏数据' : ($lang == 'ja' ? 'ゲームデータ' : ($lang == 'ko' ? '게임 데이터' : 'Game Stats')); ?>
                            </h3>

                            <div class="grid grid-cols-2 gap-6 text-center">
                                <?php foreach($t['preRegister']['stats'] as $stat) : ?>
                                    <div class="bg-light/50 backdrop-blur-sm rounded-lg p-5 border border-secondary/20 hover:border-primary/30 transition-colors">
                                        <div class="text-3xl md:text-4xl font-bold mb-2 text-primary">
                                            <?php echo $stat['value']; ?>
                                        </div>
                                        <div class="text-sm md:text-base text-dark/70">
                                            <?php echo $stat['label']; ?>
                                        </div>
                                    </div>
                                <?php endforeach; ?>
                            </div>

                            <div class="mt-12 border border-secondary/20 rounded-lg overflow-hidden shadow-chinese">
                                <img src="https://picsum.photos/id/239/400/200" alt="游戏角色" class="w-full h-auto">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-dark text-light py-12 border-t border-secondary/30">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-10">
                <div class="md:col-span-1">
                    <div class="flex items-center gap-2 text-2xl font-bold text-primary mb-4">
                        <i class="fa fa-pagelines text-jade"></i>
                        <span><?php echo $t['siteTitle']; ?></span>
                    </div>
                    <p class="text-gray-400 mb-6 leading-relaxed">
                        <?php echo $t['footer']['description']; ?>
                    </p>
                    <div class="flex gap-4">
                        <a href="#" class="w-10 h-10 rounded-full bg-dark/50 border border-secondary/30 flex items-center justify-center hover:bg-primary/20 transition-colors">
                            <i class="fa fa-facebook"></i>
                        </a>
                        <a href="#" class="w-10 h-10 rounded-full bg-dark/50 border border-secondary/30 flex items-center justify-center hover:bg-primary/20 transition-colors">
                            <i class="fa fa-twitter"></i>
                        </a>
                        <a href="#" class="w-10 h-10 rounded-full bg-dark/50 border border-secondary/30 flex items-center justify-center hover:bg-primary/20 transition-colors">
                            <i class="fa fa-instagram"></i>
                        </a>
                        <a href="#" class="w-10 h-10 rounded-full bg-dark/50 border border-secondary/30 flex items-center justify-center hover:bg-primary/20 transition-colors">
                            <i class="fa fa-youtube-play"></i>
                        </a>
                    </div>
                </div>

                <div class="md:col-span-2">
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-8">
                        <?php foreach($t['footer']['links'] as $linkGroup) : ?>
                            <div>
                                <h4 class="text-lg font-bold mb-4 text-primary"><?php echo $linkGroup['title']; ?></h4>
                                <ul class="space-y-2">
                                    <?php foreach($linkGroup['items'] as $item) : ?>
                                        <li>
                                            <a href="<?php echo $item['link']; ?>" class="text-gray-400 hover:text-primary transition-colors flex items-center gap-1">
                                                <i class="fa fa-angle-right text-xs text-secondary"></i>
                                                <?php echo $item['name']; ?>
                                            </a>
                                        </li>
                                    <?php endforeach; ?>
                                </ul>
                            </div>
                        <?php endforeach; ?>
                    </div>
                </div>

                <div class="md:col-span-1">
                    <h4 class="text-lg font-bold mb-4 text-primary"><?php echo $t['footer']['subscribe']; ?></h4>
                    <p class="text-gray-400 mb-4 text-sm leading-relaxed">
                        <?php echo $t['footer']['subscribeDesc']; ?>
                    </p>
                    <form class="mb-3">
                        <div class="flex">
                            <input type="email" placeholder="<?php echo $t['footer']['subscribePlaceholder']; ?>" 
                                class="flex-1 px-4 py-2 rounded-l-lg focus:outline-none bg-dark/50 border border-secondary/30 focus:border-primary text-light">
                            <button type="submit" class="bg-primary hover:bg-red-800 px-4 py-2 rounded-r-lg transition-colors">
                                <i class="fa fa-paper-plane"></i>
                            </button>
                        </div>
                    </form>
                    <p class="text-gray-500 text-xs">
                        <?php echo $t['footer']['privacyNote']; ?>
                    </p>
                </div>
            </div>

            <div class="border-t border-secondary/20 pt-6">
                <div class="flex flex-col md:flex-row justify-between items-center">
                    <p class="text-gray-500 text-sm mb-4 md:mb-0">
                        <?php echo $t['footer']['copyright']; ?>
                    </p>
                    <div class="flex gap-4 text-sm flex-wrap justify-center">
                        <?php foreach($t['footer']['legalLinks'] as $link) : ?>
                            <a href="<?php echo $link['link']; ?>" class="text-gray-500 hover:text-primary transition-colors px-2 py-1">
                                <?php echo $link['name']; ?>
                            </a>
                        <?php endforeach; ?>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <!-- JavaScript -->
    <script>
        // 移动端菜单切换
        document.getElementById('menu-toggle').addEventListener('click', function() {
            const nav = document.getElementById('main-nav');
            nav.classList.toggle('hidden');
        });

        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                const targetId = this.getAttribute('href');
                if (targetId === '#') return;
                
                const targetElement = document.querySelector(targetId);
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 80,
                        behavior: 'smooth'
                    });
                    
                    // 关闭移动端菜单
                    document.getElementById('main-nav').classList.add('hidden');
                }
            });
        });

        // 滚动时导航栏样式变化
        window.addEventListener('scroll', function() {
            const header = document.querySelector('header');
            if (window.scrollY > 50) {
                header.classList.add('py-2', 'shadow');
                header.classList.remove('py-3');
            } else {
                header.classList.add('py-3');
                header.classList.remove('py-2', 'shadow');
            }
        });

        // 滚动显示动画
        function checkScroll() {
            const elements = document.querySelectorAll('.scroll-reveal');
            elements.forEach(element => {
                const elementPosition = element.getBoundingClientRect().top;
                const windowHeight = window.innerHeight;
                if (elementPosition < windowHeight - 100) {
                    element.classList.add('active');
                }
            });
        }

        // 初始检查
        window.addEventListener('load', checkScroll);
        // 滚动时检查
        window.addEventListener('scroll', checkScroll);
    </script>
</body>
</html>
    